<template>
  <div class="great-video-box" v-if="isGreatVideoBox">
    <div class="top-box" v-show="boxTopIsShown">
      <p class="left-p">精彩回放</p>
      <div class="more-box" @click="clickMoreGreatPage">
        <p>更多</p>
        <Iconfont iconClass="iconfont iconyoujiantou" />
      </div>
    </div>
    <ul class="great-ul">
      <li
        v-for="v of homeGreatVideoListArray"
        :key="v.id"
        @click="linkLiveBack(v.id)"
      >
        <img
          class="video-cover"
          :src="v.imagUrl + '?x-oss-process=image/resize,m_fixed,h_205,w_363'"
        />
        <div class="great-right">
          <p>{{ v.title }}</p>
          <div class="video-pv-box">
            <!-- <img src="../../assets/images/zxyh/scan.png"/> -->
            <span>{{ v.fwCount || 0 }}观看</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isGreatVideoBox: false,
      homeGreatVideoListArray: [],
    };
  },
  props: {
    boxTopIsShown: {
      type: Boolean,
      default: true,
    },
    VideoListArray: {
      type: Array,
      default: [],
    },
  },
  created() {
    // this.getHomeGreatVideo();
              this.isGreatVideoBox = true;

  },

  watch: {
    VideoListArray: {
      handler(newVal) {
        this.homeGreatVideoListArray = newVal;
      },
      immediate: true,
	  deep:true
    },
  },
  methods: {
    linkLiveBack(vid) {
      this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
    },
    //获取首页精彩视频
    getHomeGreatVideo() {
      this.$http
        .get("h5live/zx/home/niceBackVideos")
        .then((res) => {
          //useType 1 是 首页    2 专辑管理
          if (res.data.code == "000000") {
            if (res.data.data.length != "0") {
              //console.log(res.data.data)
              this.homeGreatVideoListArray = res.data.data;
              this.isGreatVideoBox = true;
            }
          }
        })
        .catch((response) => {});
    },
    clickMoreGreatPage() {
      this.$router.push({
        path: `/${this.$channel}/geratVideoMore`,
      });
    },
    // 观众数量 以万为单位
    filtNum(num) {
      if (!num) {
        num = 0;
      } else if (num > 10000) {
        num = `${(num / 10000).toFixed(1)}w`;
      }
      return num;
    },
  },
};
</script>

<style scoped="scoped">
.iconyoujiantou {
  font-size: 24px;
}
.video-pv-box {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 30px;
  left: 20px;
}
.video-pv-box img {
  width: 32px;
  height: 32px;
  margin-right: 9px;
}
.video-pv-box span {
  margin-top: 2px;
}

.great-right {
  flex: 1;
  /*background: darkcyan;*/
  padding-left: 20px;
  padding-right: 10px;
  position: relative;
}
.great-right p {
  font-size: 28px;
  font-weight: bold;
  color: #333333;
  line-height: 42px;
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.great-ul li {
  /* padding: 20px 15px; */
  margin: 0 32px 20px;
  display: flex;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 24px;
}
.great-ul li .video-cover {
  width: 382px;
  height: 214px;
  border-radius: 24px;
}
.top-box {
  width: 100vw;
  display: flex;
  align-items: center;
  margin-top: 48px;
  margin-bottom: 24px;
}
.more-box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 30px;
  font-size: 27px;
  font-weight: 500;
  color: #777777;
}
.more-box p {
  font-size: 27px;
  font-weight: 400;
  color: #777777;
  margin-right: 3px;
}
.left-p {
  display: flex;
  align-items: center;
  margin-left: 32px;
  font-size: 35px;
  font-weight: 800;
  color: #34323f;
}
.left-p::before {
  content: " ";
  height: 44px;
  width: 44px;
  margin-right: 16px;
  background: url("../../assets/images/zxyh/wonderful_replay.png") no-repeat;
  background-size: 100% 100%;
}
</style>
